import React from 'react';
import styled from '@emotion/styled';
import { useNavigate } from 'react-router-dom';

const GlassMessageContainer = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  z-index: 9999;
`;

const Message = styled.div`
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 4px;
  font-size: 18px;
  text-align: center;
`;

const BackIcon = styled.div`
  position: absolute;
  top: 16px;
  right: 16px; // 修改了这里，将 left 更改为 right
  cursor: pointer;
  font-size: 28px; // 修改了这里，将字体大小从 24px 改为 28px
  color: #333; // 添加了这里，设置字体颜色
  font-weight: bold; // 添加了这里，设置字体加粗
  background-color: rgba(255, 255, 255, 0.7); // 添加了这里，设置背景色
  padding: 4px 8px; // 添加了这里，设置内边距
  border-radius: 4px; // 添加了这里，设置圆角
`;

const WaitNotic = () => {
  const navigate = useNavigate();

  const handleBackClick = () => {
    navigate(-1);
  };

  return (
    <GlassMessageContainer>
      <BackIcon onClick={handleBackClick}>&larr;</BackIcon>
      <Message>该功能暂未完成开发，敬请期待</Message>
    </GlassMessageContainer>
  );
};

export default WaitNotic;
